<script setup lang="ts">
import { computed } from 'vue';
import type { ButtonProps } from 'ant-design-vue';
import { useAuth } from '@/hooks/business/auth';
// 此组件为涉及权限的按钮组件
interface Props extends ButtonProps {
  /** 按钮权限代码 */
  permission: string | string[];
  /** 是否使用异步权限检查（多角色并集） */
  async?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  async: false
});

const emit = defineEmits<{
  click: [event: MouseEvent];
}>();

const { hasAuthSync, hasAuth } = useAuth();

const hasPermission = computed(() => {
  if (props.async) {
    // 异步版本暂时返回true，因为异步检查在模板中不适用
    // 实际项目中可以考虑使用响应式的权限状态
    return true;
  }
  return hasAuthSync(props.permission);
});

async function handleClick(event: MouseEvent) {
  if (props.async) {
    // 异步权限检查
    const hasAuthResult = await hasAuth(props.permission);
    if (!hasAuthResult) {
      window.$message?.error('您没有权限执行此操作');
      return;
    }
  }

  emit('click', event);
}
</script>

<template>
  <AButton v-if="hasPermission" v-bind="{ ...props, ...$attrs }" @click="handleClick">
    <slot />
  </AButton>
</template>
